/* Font  
========================================================================================*/	
body { -webkit-text-size-adjust:100%; -moz-text-size-adjust:100%; font-family:Arial, Helvetica, sans-serif; color:#9f7467; font-size:14px; line-height:24px; }
h1 { font-family: 'Sancreek', cursive, Arial, Helvetica, sans-serif; }
h2, h3, h4, h5, h6, nav, #footer { font-family: 'Bitter', serif, Arial, Helvetica, sans-serif; }

/* End Font  
========================================================================================*/

/* Branding  
========================================================================================*/
body { background:#702311 url(../img/body-pattern.png) repeat 0 0; margin:0; }
.pageWidth { width:900px; margin:0 auto; padding:0 20px; }

#logo { display:block; color:#ffffff; font-size:45px; line-height:50px; float:left; padding-top:45px; text-align:center }

#header { background:rgba(225,99,58,0.25) url(../img/header-bg.png) no-repeat center 0; padding:39px 0 44px 0 }
header, nav, section, footer { display:block;}

/* END Branding  
========================================================================================*/

/* HEADING   
========================================================================================*/

h1, h2, h3, h4, h5, h6 { color:#ffffff; }
h1 { font-size:60px; line-height:68px; }
h2 { font-size:30px; line-height:35px; margin-bottom:10px; }
h3 { font-size:27px; line-height:32px; margin-bottom:10px; }
h4 { font-size:25px; line-height:30px; margin-bottom:10px; }
h5 { font-size:23px; line-height:28px; margin-bottom:10px; }
h6 { font-size:21px; line-height:26px; margin-bottom:10px; }

/* END  HEADING   
========================================================================================*/

/* Links AND Button   
========================================================================================*/
a:focus{ outline:none;}
a { text-decoration:none; color:#9d9d9d }
a:hover { color:#393939 }
/* Links AND Button   
========================================================================================*/

/* Main Navigation 
========================================================================================*/
 
nav { border-radius:10px; font-size:14px; float:right; padding:10px}
nav li { float:left; border-radius:50%; box-shadow:0 2px 0 rgba(0,0,0,0.1), 2px 0 0 rgba(0,0,0,0.1), 0px 2px 0 rgba(0,0,0,0.1); margin-left:5px;  overflow:hidden;  }
nav li a { background:rgba(253,172,148,0.5) url(../img/nav-bg.png) repeat-x 0 0; color:#ffffff; text-align:center; width:112px; height:67px; padding:45px 2px 0 2px; display:inline-block; border-radius:50%; box-shadow: inset 0 30px 40px rgba(255,255,255,0.70); position:relative;}
nav li a:hover, nav li.active a { color:#ffffff; text-shadow:0 1px 0 rgba(0,0,0,0.50) }
nav li:first-child { background:none; margin-left:0 }
	
nav li a:before , nav li a:after { background:rgba(253,172,148,0.5) url(../img/nav-bg.png) repeat-x 0 0; padding:0; width:100%; display:block; position:absolute; font-size:0; z-index:2;
-webkit-transition:all 0.3s ease;
-moz-transition:all 0.3s ease;
-o-transition:all 0.3s ease;
transition:all 0.3s ease; vertical-align:top; content:""attr(title)""; font-size:14px;  top:0; padding-top:200px; 
}

nav li a:after { top:-200px; z-index:-5 }
nav li a:hover:before, nav li.active a:before { top:200px; }
nav li a:hover:after, nav li.active a:after { top:0px; }

#menu { display:none; color:#ffffff; font-size:16px; background:rgba(255,255,255,0.20) url(../img/menu-img.png) no-repeat 97% 18px; padding:18px 0 15px 3%; text-align:left;  }

/* End Navigation 
========================================================================================*/

#container { background:url(../img/middel-bg.png) repeat-x left top;  } 
.contantArea { background:url(../img/container-bg.png) repeat-x left top; padding:45px 0 10px 0}

article ul li { padding-left:15px;}
article ul li:before{ content:'B'; text-indent:-5px; font-weight:bold; font-size:60px; height:5px; line-height:5px; width:5px; border-radius:10px;  vertical-align:middle; float:left;  margin-left:-15px; overflow:hidden; margin-top:8px; }
article ol { margin-left:15px; }
article ol li { list-style:decimal; }

.pageControl{ transform: translate(0px, 0px);
-webkit-transform: translate(0px, 0px);
-moz-transform: translate(0px, 0px);
-o-transform: translate(0px, 0px);
-ms-transform: translate(0px, 0px);}

.activepage .pageControl{transform: translate(-1000px, 0px);
-webkit-transform: translate(-1000px, 0px);
-moz-transform: translate(-1000px, 0px);
-o-transform: translate(-1000px, 0px);
-ms-transform: translate(-1000px, 0px);

}

/* FORM 
========================================================================================*/
fieldset {}
/* Footer
===============================================*/
#footer { text-align:center; font-size:12px; padding:15px 0 15px 0; }
.copyRight { color:#FFF; }

/* transition
===============================================*/
#wrapper, #widecolumn, aside, nav li{transition: all 0.2s; -moz-transition: all 0.2s; -webkit-transition: all 0.2s; -o-transition: all 0.2s;}



